<template>
  <div>
    <vm-cell :has-arrow="true"
             :has-top-border="true"
             :has-margin="true"
             :show-title="false"
             style="margin-top: 20px;"
             @cellClicked="clickSwitchOrg">
      <div class="cell-item"
           title-align="left">
        <text class="icon icon-sm text-info">&#xe7c6;</text>
        <text>切换鸡场</text>
      </div>
    </vm-cell>

    <vm-cell :has-arrow="true"
             :has-top-border="true"
             :has-margin="true"
             :show-title="false"
             @cellClicked="clickPwd">
      <div class="cell-item"
           title-align="left">
        <text class="icon icon-sm text-accent">&#xe613;</text>
        <text>修改密码</text>
      </div>
    </vm-cell>

    <div class="mt-3">
      <vm-button text="退出登录"
                 style="margin-bottom: 30px;"
                 @buttonClicked="logout"></vm-button>
    </div>

    <div class="mt-3"
         style="opacity: 0;"
         v-if="!isRelease">
      <vm-button text="Test"
                 style="margin-bottom: 30px;"
                 @buttonClicked="gotest"></vm-button>
    </div>

    <vm-mask :height="orgMaskHeight"
             width="560"
             :show-close="false"
             :show.sync="switchOrgVisible">
      <list>
        <cell v-for="(org, index) in orgs"
              :key="index"
              @click="switchOrg(org)">
          <text :class="['org-text', org.isCurrentFarm && 'text-primary']">{{org.orgName}}</text>
        </cell>
      </list>
    </vm-mask>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import VmMask from '../../components/vm-mask.vue'
import {
  STORAGE_FIRST_LAUNCH,
  STORAGE_USER,
  STORAGE_LOGIN,
  STORAGE_TOKEN,
  EVENT_GET_USER,
  EVENT_GET_USER_REFRESH
} from '../../plugins/constant'

export default {
  components: {
    VmButton,
    VmCell,
    VmMask
  },
  props: {},
  data() {
    return {
      user: {},
      switchOrgVisible: false,
      isRelease: /.*\.com$/.test(weex.config.env.request)
    }
  },
  computed: {
    orgs() {
      return (this.user.joinUserOrg || []).map(item => {
        item.isCurrentFarm = item.clientId === this.user.defaultClientId
        return item
      })
    },
    orgCount() {
      return this.orgs.length
    },
    orgMaskHeight() {
      return this.orgCount > 5 ? 500 : this.orgCount * 100
    }
  },
  watch: {},
  created() {
    this.$event.on(EVENT_GET_USER, res => this.user = res)
    this.getMe()
  },
  methods: {
    getMe() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
    },
    logout() {
      // 退出登录的接口只是为了清除cookie，这里应该不需要调用
      this.$http({
        method: 'GET',
        name: 'auth.logout'
      }).then(res => {
        // this.$notice.toast({ message: JSON.stringify(res) })
      }).catch(err => {
        // this.$notice.toast({ message: JSON.stringify(err) })
      }).then(() => {
        this.$notice.toast({ message: '成功退出登录' })
        this.$storage.removeAllSync()
        this.$storage.setSync(STORAGE_FIRST_LAUNCH, '1')
        this.$router.setHomePage('/pages/user/login.js')
      })
    },
    clickPwd() {
      this.$nav.open({ name: 'user.password' })
    },
    // 切换鸡场
    clickSwitchOrg() {
      this.switchOrgVisible = true
    },
    switchOrg(org) {
      this.switchOrgVisible = false
      if (this.user.defaultClientId === org.clientId) {
        return this.$notice.toast({ message: `当前农场已经是${org.orgName}` })
      }
      this.$http({
        method: 'GET',
        name: 'auth.org.switch',
        data: {
          orgId: org.clientId
        },
        errorMsg: '切换鸡场失败'
      }).then(res => {
        const { access_token, refresh_token, ...rest } = res || {}
        this.$storage.setSync(STORAGE_TOKEN, access_token)
        this.$storage.setSync(STORAGE_LOGIN, rest)
        this.$event.emit(EVENT_GET_USER_REFRESH, {})
        this.$notice.toast({ message: `已成功切换到: ${org.orgName}` })
      })
    },
    // 测试
    gotest() {
      this.$nav.open({
        name: 'test'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.mt-3 {
  margin-top: 30px;
}
.flex-row {
  flex-direction: row;
}
.p-3 {
  padding: 30px;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.cell-item {
  flex-direction: row;
  flex: 1;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.icon-sm {
  font-size: 40px;
  margin-right: 20px;
}
.text-primary {
  color: $primary;
}
.text-accent {
  color: $accent;
}
.text-info {
  color: $info;
}

.org-text {
  height: 100px;
  line-height: 100px;
  padding-left: 30px;
  padding-right: 30px;
  lines: 1;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
</style>
